import React from 'react'
import TabWithCustomUnderline from "../../../../../../../layouts/TabWithCustomUnderline/TabWithCustomUnderline";
import DevRankList from "../../../../../../../shared-components/DevRankList/DevRankList";
// import {fansRank} from "../../../../../../../utils/mockdata";
import NoFansIcon from "../../../../../../../res/images/web/live-room/fullscreen-monster-icon.png";
import CustomButton from "../../../../../../../shared-components/CustomButton/CustomBotton";

const OnLiveHeaderFullScreenFansRankList = props => {

    const {
        setShowRank,
    } = props

    const rankTemplate = (
        <div>
            <div
                onClick={() => setShowRank(false)}
                className='full-screen-mask'
                style={{zIndex: 3,}}
            />
            <div className='live-room-header-player-full-side' style={{width: '50vh'}}>
                <TabWithCustomUnderline
                    tabBarBackgroundColor='rgba(0, 0, 0, 0.5)'
                    tabBarActiveTextColor='#fff'
                    tabBarInactiveTextColor='#fff'
                    // tabs={}
                    tabs={[
                        {title: '周榜',},
                        {title: '总榜',},
                    ]}
                >
                    <DevRankList
                        fans={[]}
                        color='#fff'
                        bg='rgba(0, 0, 0, 0.5)'
                    />
                    <div className='live-room-header-player-full-side-no-fans'>
                        <img
                            style={{margin: '5rem 1rem 1rem'}}
                            src={NoFansIcon}
                            alt=''
                        />
                        <p
                            style={{
                                marginBottom: '3rem',
                                color: '#fff',
                            }}
                        >
                            还没人上榜哦，让更多人来看吧
                        </p>
                        <div style={{width: '60%', margin: '0 auto',}}>
                            <CustomButton
                                size='large'
                            >转发直播</CustomButton>
                        </div>
                    </div>
                </TabWithCustomUnderline>
            </div>
        </div>
    )

    return rankTemplate
}

export default OnLiveHeaderFullScreenFansRankList
